import React, { Component } from 'react'
import './index.css'
import Header from './Header'
import List from './List'
import Footer from './Footer'


export default class TodoList extends Component {
    state = {
        todos: [
            { id: 1, name: '吃饭', done: true },
            { id: 2, name: '会议', done: true },
            { id: 3, name: '购物', done: true }
        ]
    }
    addTodo = (name) => {
        const { todos } = this.state
        let id = 0
        todos.forEach(item => {
            if (item.id >= id) {
                id = item.id + 1
            }
        })
        this.setState({ todos: [{ id, name, done: false }, ...todos] })
    }
    updateTodo = (id, done) => {
        const { todos } = this.state
        const newTodos = todos.map(item => {
            if (item.id === id) {
                return { ...item, done }
            }
            return item
        })
        this.setState({ todos: newTodos })
    }
    deleteTodo = (id) => {
        const { todos } = this.state
        const newTodos = todos.filter(todo => todo.id !== id)
        this.setState({ todos: newTodos })
    }
    checkAll = (done)=>{
        const { todos } = this.state
        const newTodos = todos.map(todo => ({...todo,done}))
        this.setState({ todos: newTodos })
    }
    clearAllDone = ()=>{
        const { todos } = this.state
        const newTodos = todos.filter(todo => !todo.done)
        this.setState({ todos: newTodos })
    }
    render() {
        const { todos } = this.state
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header addTodo={this.addTodo}/>
                    <List todos={todos} updateTodo={this.updateTodo} deleteTodo={this.deleteTodo}/>
                    <Footer todos={todos} checkAll={this.checkAll}  clearAllDone={this.clearAllDone} />
                </div>
            </div>
        )
    }
}